<template>
  <div class="map-container" ref="mapRef">map</div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  import chinaJSON from './china.json'

  const mapRef = ref()
  echarts.registerMap('china', chinaJSON as any)
  onMounted(() => {
    let mycharts = echarts.init(mapRef.value)
    mycharts.setOption({
      geo: {
        map: 'china',
        roam: true, // 鼠标缩放
        left: 50,
        top: 100,
        right: 50,
        bottom: 0,
        label: {
          show: true,
          color: '#fff',
          fontSize: 14,
        },
        itemStyle: {
          color: '#0D65AD',
          opacity: 0.8,
        },
        emphasis: {
          itemStyle: {
            color: 'yellow',
          },
          label: {
            fontSize: 20,
          },
        },
      },
      series: [
        {
          type: 'lines', //航线的系列
          data: [
            {
              coords: [
                [116.405285, 39.904989], // 起点
                [119.306239, 26.075302], // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color: 'orange',
                width: 5,
              },
            },
            {
              coords: [
                [116.405285, 39.904989], // 起点
                [114.298572, 30.584355], // 终点
              ],
              // 统一的样式设置
              lineStyle: {
                color: 'yellow',
                width: 5,
              },
            },
          ],
          //开启动画特效
          effect: {
            show: true,
            symbol: 'arrow',
            color: 'black',
            symbolSize: 10,
          },
        },
      ],
    })
  })
</script>

<style lang="scss" scoped></style>
